<template>
    <div class="MatchImportantInfo">
       <div class="NecessaryInfo">
         <div class="NameFont">报名必填信息：</div>
         <div style="height: 84px;display: flex;flex-direction: column;justify-content: space-around;width: 100%;">
         <el-checkbox-group v-model="InfoCheckList" style="display: flex;">
           <el-checkbox v-for="(Info,InfoIndex) in InfoList" :key="InfoIndex" :label="Info" style="width: 8%"></el-checkbox>
         </el-checkbox-group>
         <el-checkbox-group v-model="InfoCheckList" style="display: flex;">
             <el-checkbox v-for="(InfoTwo,InfoTwoIndex) in InfoListTwo" :key="InfoTwoIndex" :label="InfoTwo" style="width: 8%"></el-checkbox>
          </el-checkbox-group>
         </div>
       </div>
      <div class="NecessaryInfo">
        <div class="NameFont"></div>
        <div style="display: flex;width: 100%">
          <el-input v-model="SelfDefined" size="small" placeholder="自定义" style="display: flex;align-items: center;width: 15%;"></el-input>
          <i class="el-icon-circle-plus-outline AddNew" v-on:click="AddInfoList"></i>
        </div>
      </div>
      <div class="InfoItem">
        <div style="width: 20%;line-height: 42px">报名人数限制：</div>
        <el-switch
          v-model="NumCheck"
          active-color="#409EFF"
        >
        </el-switch>
        <el-input v-show='NumCheck' v-model="NumLimits" size="small"  maxlength="2" style="display: flex;align-items: center;width: 10%;margin-left: 12px;"></el-input>
      </div>
      <!--<div class="MatchPoints" v-if="Series">-->
        <!--<div class="NameFont">本次比赛积分：</div>-->
      <!--<div class="MatchCard">-->
        <el-card class="MatchCard">
         <div class="MatchPoints" v-if="Series">
           <div class="leftBox">
             <div>本次比赛积分：</div>
           </div>
           <div class="rightBox">
             <div id="4" class="lineBox">
               <div class="inputBox">
                 <div class="pointsInput" v-for="(input4,index) in pointsInputs4">
                  <div class="pointsIndex">{{index+1}}</div>
                  <el-input
                    v-model="pointsInputs4[index]"
                    maxlength="3"
                    size="small"
                    clearable style="width: 60%">
                  </el-input>
                  </div>
               </div>
               <div class="radio"></div>
             </div>
             <div id="8" class="lineBox">
               <div class="inputBox">
                 <div class="pointsInput" v-for="(input8,index) in pointsInputs8">
                  <div class="pointsIndex">{{index+5}}</div>
                  <el-input
                    v-model="pointsInputs8[index]"
                    maxlength="3"
                    size="small"
                    clearable style="width: 60%">
                  </el-input>
                 </div>
               </div>
               <div class="radio">
                 <el-switch v-model="checkSame8" label="1" class="radioCheck" active-text="5 - 8名积分一致"></el-switch>
               </div>
             </div>
             <div id="16" class="lineBox">
               <div class="inputBox">
                 <div class="pointsInput" v-for="(input16,index) in pointsInputs16">
                  <div class="pointsIndex">{{index+9}}</div>
                  <el-input
                    v-model="pointsInputs16[index]"
                    maxlength="3"
                    size="small"
                    clearable style="width: 60%">
                  </el-input>
                 </div>
               </div>
               <div class="radio">
                 <el-switch v-model="checkSame16" label="1" class="radioCheck" active-text="9 - 16名积分一致"></el-switch>
               </div>
             </div>
             <div id="32" class="lineBox">
               <div class="inputBox">
                 <div class="pointsInput" v-for="(input32,index) in pointsInputs32">
                   <div class="pointsIndex">{{index+17}}</div>
                   <el-input
                     v-model="pointsInputs32[index]"
                     maxlength="3"
                     size="small"
                     clearable style="width: 60%">
                   </el-input>
                 </div>
               </div>
               <div class="radio">
                 <el-switch v-model="checkSame32" label="1" class="radioCheck" active-text="17 - 32名积分一致"></el-switch>
               </div>
             </div>
             <div id="64" style="width: 100%;display: flex;margin-top: 10px;">
               <div style="width: 70%;display: flex;">
                 <div class="pointsInput">
                   <div class="pointsIndex">33</div>
                   <el-input
                     v-model="pointsInputs16[0]"
                     maxlength="3"
                     size="small"
                     clearable style="width: 60%">
                   </el-input>
                 </div>
                 <div class="pointsInput">
                   <div class="pointsIndex">64</div>
                   <el-input
                     v-model="pointsInputs16[1]"
                     maxlength="3"
                     size="small"
                     clearable style="width: 60%">
                   </el-input>
                 </div>
               </div>
               <div class="radio">
                 <el-switch v-model="checkSame64" label="1" class="radioCheck" active-text="33 - 64名积分一致"></el-switch>
               </div>
             </div>
           </div>
         </div>
        </el-card>
      <!--</div>-->
    </div>
</template>

<script>
    export default {
        name: "MatchImportantInfo",
        data(){
          return{
             InfoList:['年龄','性别','身份证号码','组别-项目','手机号码','注册证号'],
             InfoListTwo:[],
             InfoCheckList:[],
             SelfDefined:'',
             NumCheck:false,
             NumLimits:'',
             Series:true,
             pointsInputs4:[],
             pointsInputs8:[],
             pointsInputs16:[],
             pointsInputs32:[],
             pointsInputs64:[],
             checkSame8:false,
             checkSame16:false,
             checkSame32:false,
             checkSame64:false,
          }
        },
      watch:{
        NumLimits(val){
        },
      },
      mounted(){
          for( var i = 4 ;i > 0;i--){
            this.pointsInputs4.push('')
            this.pointsInputs8.push('')
          }
          for(var j = 8;j > 0;j--){
            this.pointsInputs16.push('')
          }
          for(var z = 16;z > 0;z--){
            this.pointsInputs32.push('')
          }
          for(var x = 2; x > 0;x--){
            this.pointsInputs64.push('')
          }
      },
      methods:{
        AddInfoList(){
          if(this.SelfDefined) {
            if (this.InfoList.length <10) {
              this.InfoList.push(this.SelfDefined)
              console.log(this.InfoList.length)
              this.SelfDefined = ''
            }
            else{
              if(this.InfoListTwo.length<10){
                this.InfoListTwo.push(this.SelfDefined)
                this.SelfDefined = ''
              }
              else{
                this.$message.error('超出自定义数量限制');
              }
            }
          }
        },
        // ShowMatchInfo(){
        //   this.$store.commit('setAddMatchDetailStep',3)
        // },
      }
    }
</script>

<style scoped>
  .MatchImportantInfo{
    /*height: 80%;*/
  }
  .NecessaryInfo{
    display: flex;
    align-items: center;
    height: 84px;
  }
  .NameFont{
    width: 20%;
    line-height: 42px;
  }
  .AddNew{
    font-size: 26px;
    line-height: 42px;
    margin-left: 12px;
    color: #409EFF;
  }
  .InfoItem{
    display: flex;
    align-items: center;
    width: 80%;
    height: 42px;
    padding-bottom: 10px;
    border-bottom: 1px solid #BBBBBB;
  }
  .MatchCard{
    width: 75%;
    margin-top: 20px;
  }
  .MatchPoints{
    display: flex;
    /*align-items: center;*/
    width: 100%;
  }
  .leftBox{
    width: 20%;
  }
  .rightBox{
    width: 80%;
    display: flex;
    flex-direction: column;
  }
  .lineBox{
    width: 100%;
    display: flex;
    margin-top: 10px;
    border-bottom: 1px solid #BBBBBB;
  }
  .inputBox{
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 70%;
  }
  .pointsInput{
    width: 25%;
    display: flex;
    align-items: baseline;
    justify-content: space-around;
    margin-bottom: 10px;
  }
  .pointsIndex{
    width: 40%;
    text-align: center;
  }
  .radio{
    width: 30%;
  }
  .radioCheck{
    margin-top: 4%;
    margin-left: 10%;
  }
</style>
